<template>
  <q-dialog class="work-order-transfer" v-model="show" persistent>
    <q-card v-drag style="min-width: 760px">
      <q-card-section class="dialog-title bg-primary">
        <div style="position: absolute;color: #fff">
          <span class="text-ellipsis font-size-14" style="width: 200px">
            {{ `[${form.id ? form.id : '—'}]` }}
            <q-tooltip>{{ `[${form.id ? form.id : '—'}]` }}</q-tooltip>
          </span>
        </div>
        <div class="text-center text-white">{{ '工单转移' }}</div>
      </q-card-section>
      <q-form @submit="submit" @reset="reset" class="q-gutter-md dialog-content" greedy>
        <q-card-section>
          <div class="row">
            <div class="col">
              <table>
                <tr>
                  <td>
                    <span class="text text-ellipsis">产品: {{ form.materialName ? form.materialName : '—' }}({{ form.materialNumber ? form.materialNumber : '—' }})</span>
                    <q-tooltip>产品: {{ form.materialName ? form.materialName : '—' }}({{ form.materialNumber ? form.materialNumber : '—' }})</q-tooltip>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text text-ellipsis" style="padding-bottom: 0">工序: {{ form.processSort && form.processName ? `${form.processSort}-${form.processName}` : '—' }}</span>
                    <q-tooltip>工序: {{ form.processSort && form.processName ? `${form.processSort}-${form.processName}` : '—' }}</q-tooltip>
                  </td>
                </tr>
              </table>
            </div>
            <div class="col">
              <table>
                <tr>
                  <td>
                    <span class="text text-ellipsis">订单编号: {{ form.orderNumber ? form.orderNumber : '—' }}</span>
                    <q-tooltip>订单编号: {{ form.orderNumber ? form.orderNumber : '—' }}</q-tooltip>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text text-ellipsis" style="padding-bottom: 0">派工数量: {{ form.jobCount ? form.jobCount : '—' }}</span>
                    <q-tooltip>派工数量: {{ form.jobCount ? form.jobCount : '—' }}</q-tooltip>
                  </td>
                </tr>
              </table>
            </div>
            <div class="col">
              <table>
                <tr>
                  <td>
                    <span class="text text-ellipsis">批次编号: {{ form.orderBatch ? form.orderBatch : '—' }}</span>
                    <q-tooltip>批次编号: {{ form.orderBatch ? form.orderBatch : '—' }}</q-tooltip>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text text-ellipsis" style="padding-bottom: 0">完工数量: {{ form.finishedCount }}</span>
                    <q-tooltip>完工数量: {{ form.finishedCount }}</q-tooltip>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </q-card-section>
        <q-card-section>
          <div class="body">
            <div class="row">
              <div class="col-5">
                <div class="bg">
                  <span
                    style="font-size: 16px;color: #333">
                    [原加工设备]
                  </span>
                  <span
                    style="font-size: 14px;color: #333;margin-top: 20px"
                    class="text-ellipsis">
                    当前轮班: {{ form.shiftName ? form.shiftName : '—' }}
                  </span>
                  <span
                    style="font-size: 14px;color: #333;margin-top: 20px;width: 240px"
                    class="text-ellipsis">
                    <q-tooltip>
                      设备位置: {{ form.workCenterName ? form.workCenterName : '—' }}
                    </q-tooltip>
                    设备位置: {{ form.workCenterName ? form.workCenterName : '—' }}
                  </span>
                  <span
                    style="font-size: 14px;color: #333;margin-top: 20px;width: 240px"
                    class="text-ellipsis">
                    <q-tooltip>
                      加工设备: {{ form.deviceName ? form.deviceName : '—' }}
                    </q-tooltip>
                    加工设备: {{ form.deviceName ? form.deviceName : '—' }}
                  </span>
                  <span
                    style="font-size: 14px;color: #333;margin-top: 20px"
                    class="text-ellipsis">
                    操作人员: {{ form.operator ? form.operator : '—' }}
                  </span>
                </div>
              </div>
              <div class="col-2">
                <div class="bg-1"/>
              </div>
              <div class="col-5">
                <div class="bg">
                  <span
                    style="font-size: 16px;color: #333">
                    [指定设备] — 转移数量: {{ parseInt(Number(form.jobCount) - Number(form.finishedCount)) }}
                  </span>
                  <q-field
                    style="margin-top: 10px"
                    class="field"
                    dense
                    ref="field"
                    borderless
                    no-error-icon
                    v-model="date"
                    :rules="[
                        val => !!val || '日期不可为空',
                        val => judgeDate(val) || '转移日期不能早于今天'
                    ]"
                  >
                  <span style="color: #333333;font-size: 14px">选择日期:
                  <date-picker
                    style="width: 145px;margin-left: 2px"
                    v-model="date"
                    valueType="format"
                    placeholder="选择日期"
                  >
                </date-picker>
                </span>
                  </q-field>
                  <q-select
                    @input="getMachine();getShifts()"
                    style="width: 210px"
                    v-model="workshop"
                    :options="workshopOptions"
                    dense
                    options-dense
                    emit-value
                    map-options
                    outlined
                    :rules="[val => (val !== undefined && val !== null) || ' 请选择车间']"
                  >
                    <template v-slot:no-option>
                      <div class="no-option"/>
                    </template>
                    <template v-slot:before>
                      <label class="text-right" style="font-size: 14px;color: #333">
                        <!--<span class="text-red">*</span>-->
                        <span>所在车间:</span>
                      </label>
                    </template>
                  </q-select>
                  <q-select
                    @input="getOperator"
                    style="width: 210px"
                    v-model="machine"
                    :options="machineOptions"
                    dense
                    options-dense
                    emit-value
                    map-options
                    outlined
                    :rules="[val => (val !== undefined && val !== null) || ' 请选择设备']"
                  >
                    <template v-slot:no-option>
                      <div class="no-option"/>
                    </template>
                    <template v-slot:before>
                      <label class="text-right" style="font-size: 14px;color: #333">
                        <!--<span class="text-red">*</span>-->
                        <span>加工设备:</span>
                      </label>
                    </template>
                  </q-select>
                  <q-select
                    @input="getOperator"
                    style="width: 210px"
                    v-model="shift"
                    :options="shiftOptions"
                    dense
                    options-dense
                    emit-value
                    map-options
                    outlined
                    :rules="[
                      val => (val !== undefined && val !== null) || '请选择轮班',
                      () => myRule()
                      ]"
                  >
                    <template v-slot:no-option>
                      <div class="no-option"/>
                    </template>
                    <template v-slot:before>
                      <label class="text-right" style="font-size: 14px;color: #333">
                        <!--<span class="text-red">*</span>-->
                        <span>当前轮班:</span>
                      </label>
                    </template>
                  </q-select>
                  <span
                    style="font-size: 14px;color: #333"
                    class="text-ellipsis">
                    操作人员: {{ operator }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
        <!--<q-card-section style="margin-bottom: 20px">-->
          <!--<q-input outlined v-model="form.comments" type="textarea" counter autogrow maxlength="100">-->
            <!--<template v-slot:before>-->
              <!--<label class="text-right" style="font-size: 16px; color: #333">说明:</label>-->
            <!--</template>-->
          <!--</q-input>-->
        <!--</q-card-section>-->
        <q-separator />
        <div class="dialog-footer text-center margin-t-10">
          <q-btn outline label="取消" color="primary" @click="$emit('close')" class="q-mr-md"/>
          <q-btn unelevated label="确认" color="primary" type="submit"/>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
import { getWorkShop, getMachine, getShifts, getOperator } from 'src/boot/job/process-order'
export default {
  name: 'work-order-transfer',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  created () {
    this.getWorkShop()
  },
  data () {
    return {
      operatorPromise: null,
      machine: undefined,
      workshop: undefined,
      shift: undefined,
      date: undefined,
      operator: undefined,
      form: {
        comments: ''
      },
      workshopOptions: [], // 车间数据源
      machineOptions: [], // 设备数据源
      shiftOptions: [] // 班制数据源
    }
  },

  methods: {
    // 时间校验
    judgeDate (date) {
      const dateStr = date + 'T23:59:59Z'
      let dataOld = new Date(dateStr)
      let dataNow = new Date()
      return dataNow < dataOld
    },

    // 编辑填充表格
    assignment (val) {
      this.form = Object.assign(val[0])
    },

    // 提交表单
    submit () {
      const query = {}
      query.date = this.date
      query.deviceId = this.machine
      query.shiftId = this.shift
      query.comments = this.form.comments
      query.transferCount = parseInt(Number(this.form.jobCount) - Number(this.form.finishedCount))
      this.$emit('submit', this.form.id, query)
    },

    reset () {
      this.workshop = undefined
      this.date = undefined
      this.machine = undefined
      this.shift = undefined
      this.operator = undefined
      this.machineOptions = []
      this.shiftOptions = []
    },

    // 获取车间
    getWorkShop () {
      this.workshopOptions = []
      getWorkShop().then(res => {
        this.workshopOptions = res.data
      })
    },

    // 获取设备
    getMachine () {
      this.machine = undefined
      this.machineOptions = []
      getMachine(this.workshop).then(res => {
        this.machineOptions = res.data.map(o => {
          return {
            value: o.id,
            label: o.name
          }
        })
      })
    },

    // 获取班制
    getShifts () {
      this.shift = undefined
      this.shiftOptions = []
      getShifts(this.workshop).then(res => {
        this.shiftOptions = res.data.map(o => {
          return {
            value: o.id,
            label: o.name
          }
        })
      })
    },

    // 获取操作人
    getOperator () {
      if (this.machine === undefined || this.shift === undefined) {
        return
      }
      this.operatorPromise = getOperator(this.machine, this.shift)
      this.operatorPromise.then(res => {
        this.operator = Object.values(res.data)[0]
      })
    },

    // 异步校验实际加工人
    myRule () {
      return new Promise(resolve => {
        this.operatorPromise.then(res => {
          resolve(Object.values(res.data).length > 0 || '当前班次未进行人机绑定')
        })
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .field {
    /deep/ .q-field__messages {
      margin-left 80px
    }
  }
  /deep/ .mx-datepicker {
    width 145px
  }
  /deep/ .q-select__dropdown-icon {
    width 24px
    height 24px
    font-size 24px
    color rgba(0, 0, 0, .54)
  }
  .dialog{
    .dialog-title{
      padding 12px 16px
      line-height 1
      font-size 18px
    }
    .dialog-content{
      .name{
        font-size 16px
        display inline-block
        width 80px
      }
    }
  }
  .text {
    margin-left 28px
    padding-bottom 10px
    cursor pointer
    text-align left
  }
  .body {
    width 100%
    height 300px
    padding 0 5px
  }
  .bg {
    width 100%
    height 300px
    padding 20px
    background-image url("../../../statics/img/note.png")
    background-repeat no-repeat
    background-size 100% 100%
    -moz-background-size 100% 100%
  }
  .bg-1 {
    margin: 100% auto;
    width 50%
    height 30px
    padding 10px
    background-image url("../../../statics/img/arrows.png")
    background-repeat no-repeat
    background-size 100% 100%
    -moz-background-size 100% 100%
  }
</style>
